<!-- 我的----------------修改密码 -->
<template>
	<view class="password-change-container">
		<view class="password-input">
			<text>旧密码</text>
			<input type="password" placeholder="请输入旧密码" v-model="oldpassword" />
		</view>
		<view class="password-input">
			<text>新密码</text>
			<input type="password" placeholder="请输入新密码" v-model="newpassword" />
		</view>
		<view class="password-input">
			<text>再次输入</text>
			<input type="password" placeholder="请再次输入密码" v-model="confirmpassword" />
		</view>
		<!-- 两次密码不一致，提示错误 -->
		<view class="error-message" v-if="passwordData">
			{{ passwordData }}
		</view>
		<view class="sure-btn">
			<button @click="handleSubmit">确定</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from 'vue';
	import {
		residentsUpdateApi
	} from '../../../api/setting';
	import {
		useUserStore
	} from '../../../store/user.js';
	//状态机
	const userStore = useUserStore();
	const oldpassword = ref('');
	const newpassword = ref('');
	const confirmpassword = ref('');
	const passwordData = ref(''); // 错误提示

	// 表单提交
	const handleSubmit = async () => {
		//重置
		passwordData.value = '';

		//确定验证
		if (!oldpassword.value || !newpassword.value || !confirmpassword.value) {
			passwordData.value = "请填写完整密码信息";
			return;
		}

		if (newpassword.value !== confirmpassword.value) {
			passwordData.value = "两次输入的新密码不一致";
			return;
		}

		// 确认修改
		uni.showModal({
			title: '提示',
			content: '确定要修改密码吗？',
			success: async (res) => {
				if (res.confirm) {
					const response = await residentsUpdateApi({
						//状态机上的ID
						_id: userStore.userInfo._id,
						password: newpassword.value
					});
					if (response.code == 200) {
						uni.showToast({
							title: '密码修改成功',
							icon: 'success'
						});
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				}
			}
		});
	}
</script>


<style scoped lang="scss">
	.password-change-container {
		padding: 40rpx;
	}

	.password-input {
		margin-bottom: 40rpx;
	}

	.password-input text {

		display: block;
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: #333;
	}

	.password-input input {
		width: 100%;
		height: 80rpx;
		border: none;
		background-color: #99999911;
		border-radius: 8rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.sure-btn button {
		background-color: #1877F2;
		color: white;
		border-radius: 8rpx;
		margin-top: 20rpx;
	}

	.password-input input::placeholder {
		font-size: 28rpx;
		line-height: 30rpx;
		color: rgb(204, 204, 204);
	}

	.error-message {
		color: red;
		font-size: 24rpx;
		margin-bottom: 20rpx;
		text-align: center;
	}
</style>